/* variables */
:root {
    --dark-gray: #13231c;
    --dark-brown: #6f3120;
    --brown: #9c5034;
    --light-green: #67ed81;
    --green: #17e13f;
    --logo-color: #191CEE;
    --dark-purple: #1e24ee;
    --light-purple: #7075f6;
    --light-purple-translucent: rgba(112, 117, 246, 0.4);
    --blue: #447cfc;
    --white: #ffffff;
  }
  
  /* general styles */
  html,
  body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
  }
  
  img {
    width: 35vw;
    height: auto;
  }
  
  a,
  a:active,
  a:visited {
    text-decoration: none;
  }
  
  /* header section */
  header {
    /* background-color: var(--dark-gray); */
    background: center / cover no-repeat url(./imgs/background.jpeg);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* padding-bottom: 75vh; */
    flex-direction: column;
  }
  
  header img {
    width: 70vw;
    height:auto;
    padding: 5%;
    /* padding-right: 2%; */
  }
  
  header h2 {
    font-size: 2rem;
    text-align: center;
    padding-right: 5%;
    padding-left: 2%;
  }
  
  /* navbar */
  
  #navbar {
    background-color: var(--dark-gray);
    width: 100%;
    position: sticky;
    top: 0px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 1rem var(--light-green);
  }
  
  .icon {
    width: auto;
    height: 100px;
    padding: 10px;
  }
  
  .navA {
    background: var(--logo-color);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: var(--white);
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    margin-right: 3rem;
    margin-left: auto;
  }
  
  .navA:hover {
    background: var(--logo-color);
    text-decoration: underline;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  
  /* intro section */
  #intro-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 6rem;
    margin-bottom: 2rem;
  }
  
  #intro-container h1 {
    color: white;
    background-color: var(--logo-color);
    font-size: 90px;
    text-align: center;
    margin-top: 7rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    box-shadow: 0 0 2rem var(--logo-color);
  }
  
  #intro-container img {
    width: 66vw;
    height: auto;
    box-shadow: 0 0 2rem var(--light-green);
  }
  
  #intro-box {
    background-color: var(--dark-gray);
    color: var(--green);
    padding: 5rem 3rem;
    text-align: center;
    font-size: 2rem;
    box-shadow: 0 0 1rem var(--light-green);
  }
  
  /* information section */
  #info-container {
    display: flex;
    flex-direction: column;
    margin: 3rem 10% 2rem;
    justify-content: space-around;
    align-items: center;
    padding: 3rem 0;
    border-radius: 25px;
    color: var(--dark-gray);
  }
  
  .info {
    display: flex;
    padding: 1rem;
    margin: 0 10%;
    justify-content: space-between;
    align-items: center;
  }
  
  #info1,
  #info2,
  #info3 {
    width: 100%;
  }
  
  #info-container p {
    background-color: var(--light-purple-translucent);
    margin: 1rem;
    box-shadow: 0 1rem 2rem var(--light-purple);
    border-radius: 15px;
    padding: 0.5rem;
  }
  
  #info-container img {
    margin: 1rem;
    box-shadow: 0 0 2rem var(--light-green);
  }
  
  /* announcement */
  #announcement {
    background-color: var(--light-purple-translucent);
    border-radius: 15px;
    text-align: center;
    font-size: 1.5rem;
    padding: 1rem 3rem;
    margin: 0 20%;
  }
  
  .img img {
    margin-top: 2rem;
  }
  
  .s-display {
    display: none;
  }
  
  
  /* contact */
  #contact {
    text-align: center;
    margin: 6rem 0 0;
    line-height: 1.5rem;
  }
  
  #contact h2 {
    font-size: 2.5rem;
    background-color: var(--light-green);
    padding: 0.5rem 0;
  }
  
  #contact p {
    font-size: 1.5rem;
    padding: 1rem;
  }
  
  #contact p a {
    color: black;
  }
  
  #contact p a:hover {
    text-decoration: underline;
  }
  
  /* footer */
  footer {
    text-align: center;
    background-color: var(--dark-gray);
    color: var(--white);
    padding: 0.5rem;
    margin-bottom: 0;
  }
  
  .footer-icon {
    height: 29px;
    width: 29px;
    padding: 0;
    overflow: hidden;
  }

  /* responsive styles */
  
  /* functioning styles for large screens*/
  @media (min-width:913px) {
    .slide-left {
      position: relative;
      left: -100%;
      transition: 1s;
    }
  
    header:hover .slide-left {
      transition: 1s;
      left: 0;
    }
  
    .slide-top {
      position: relative;
      top: -100%;
      transition: 1s;
    }
  
    header:hover .slide-top {
      transition: 1s;
      top: 0;
    }
  
    .fade {
      opacity: .25;
    }
  
    #info1:hover .fade,
    #info2:hover .fade,
    #info3:hover .fade {
      opacity: 1;
    }
  }
  
  /* styles for mobile */
  @media (max-width: 912px) {
  
    body,
    html {
      overflow-x: hidden;
    }
  
    /* header for mobile */
    header {
      flex-direction: column;
      padding-bottom: 30vh;
    }
  
    header img {
      width: 80vw;
      padding: 3rem 1rem;
    }
  
    /* nav for mobile */
    .navA {
      margin-right: 0.5rem;
    }
  
    /* intro for mobile */
    #intro-container {
      background-color: var(--dark-gray);
      gap: 3rem;
    }
  
    #intro-container h1 {
      font-size: 2.5rem;
    }
  
    #intro-container img {
      margin-top: 10vh;
      width: 100vw;
    }
  
    #intro-box {
      padding-top: 30vh;
      height: 50vh;
    }
  
    /* information for mobile */
    #info-container {
      box-shadow: 0 0 2rem var(--dark-gray);
      margin: 10vh 5vw;
      padding: 1rem 0;
    }
  
    .info {
      flex-direction: column;
    }
  
    #info2 .info {
      flex-direction: column-reverse;
    }
  
    #info-container p {
      background-color: var(--light-purple);
      width: 80vw;
      margin: 0;
    }
  
    /* announcement image too */
    #info-container img,
    .img img {
      width: 80vw;
      height: auto;
      margin-top: 10vh;
    }
  
    /* announcement for mobile*/
    #announcement {
      display: flex;
      flex-direction: column;
      font-size: 1.75rem;
      padding: 1rem 0.5rem;
      margin: 0;
      background-color: var(--light-green);
      color: var(--dark-gray);
    }
  
    /* contact for mobile*/
    #contact {
      text-align: center;
      margin: 20vh 0 3rem;
      /* line-height: 1.75rem; */
      word-wrap: break-word;
      padding: 0.5rem;
    }
  
    #contact h2 {
      font-size: 2.5rem;
      background-color: var(--dark-gray);
      color: var(--light-green);
      padding: 0.5rem;
      margin: 1rem 0;
    }
  }